<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/shapeshift-engine/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/shapeshift-engine/favicon.svg" />
    <link rel="shortcut icon" href="/shapeshift-engine/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/shapeshift-engine/apple-touch-icon.png" />
    <link rel="manifest" href="/shapeshift-engine/site.webmanifest" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title data-i18n="title">ShapeShift Engine</title>
    <script type="module" crossorigin src="/shapeshift-engine/assets/index-MfFi20t1.js"></script>
    <link rel="stylesheet" crossorigin href="/shapeshift-engine/assets/index-MfL0wfb3.css">
  </head>

  <body>
    <button id="btn-toggle-lang" class="lang-floating">🌐 中文 | En</button>
    <div style="display: flex; height: 100vh">
      <!-- Canvas Region -->
      <div id="div-canvas" class="application"></div>
      <!-- Controls Region -->
      <div id="div-controls">
        <label for="input-polygon-color" data-i18n="label.polygon_color"
          >Polygon Color:</label
        >
        <input type="color" id="input-polygon-color" value="#ff0000" />
        <span data-i18n="text.or">or</span>
        <input type="checkbox" id="input-polygon-random-color" checked /><span
          data-i18n="text.random_color"
          >Random Color</span
        >
        <button
          id="btn-draw-poly"
          class="btn-control"
          data-i18n="btn.new_polygon"
        >
          New Polygon
        </button>
        <hr class="controls" />
        <label for="input-text" data-i18n="label.enter_text">Enter Text:</label>
        <input type="text" id="input-text" class="input-control" />
        <label for="input-font-size" data-i18n="label.font_size"
          >Font size:</label
        >
        <input
          type="text"
          id="input-font-size"
          class="input-control"
          value="20"
        />
        <label for="input-font-family" data-i18n="label.font_family"
          >Font family:</label
        >
        <input
          type="text"
          id="input-font-family"
          class="input-control"
          value="SimHei"
        />
        <button id="btn-new-text" class="btn-control" data-i18n="btn.new_text">
          New Text
        </button>
        <input
          type="file"
          id="input-text-list"
          class="btn-control"
          accept=".txt"
          hidden
        />
        <button
          id="btn-import-text-list"
          class="btn-control"
          data-i18n="btn.import_text_list"
        >
          Import Text List
        </button>
        <hr class="controls" />
        <div class="section-collapsible">
          <div id="toggle-polygon-list" class="collapsible-header">
            <span class="arrow">▼</span>
            <span data-i18n="text.polygon_list">Polygon List</span>
          </div>
          <ul id="list-polygons" class="collapsible-content"></ul>
        </div>
        <hr class="controls" />
        <button
          id="btn-relation-modal"
          class="btn-control"
          data-i18n="btn.polygon_relation_editor"
        >
          Polygon Relation Editor
        </button>
        <div id="div-relation-input" hidden>
          <label for="input-not-overlap" data-i18n="label.not_overlap"
            >Do not overlap:</label
          >
          <input
            type="text"
            id="input-not-overlap"
            placeholder="[[0, 1], [1, 2]]"
            class="input-control"
          />
          <label for="input-overlap" data-i18n="label.overlap">Overlap:</label>
          <input
            type="text"
            id="input-overlap"
            placeholder="[[0, 1], [1, 2]]"
            class="input-control"
          />
          <label for="input-fix" data-i18n="label.fix">Fix:</label>
          <input
            type="text"
            id="input-fix"
            placeholder="[0, 1, 2]"
            class="input-control"
          />
        </div>
        <hr class="controls" />
        <button id="btn-process" class="btn-control" data-i18n="btn.process">
          Process
        </button>
        <button
          id="btn-download-svg"
          class="btn-control"
          data-i18n="btn.download_svg"
        >
          Download SVG
        </button>
        <input
          type="file"
          id="input-import-json"
          class="btn-control"
          accept=".json"
          hidden
        />
        <button
          id="btn-import-json"
          class="btn-control"
          data-i18n="btn.import_json"
        >
          Import JSON
        </button>
        <button
          id="btn-download-json"
          class="btn-control"
          data-i18n="btn.download_json"
        >
          Download JSON
        </button>
        <button
          id="btn-advanced-modal"
          class="btn-control"
          data-i18n="btn.advanced_settings"
        >
          Advanced Settings
        </button>
        <button id="btn-debug" class="btn-control" hidden>Debug</button>
      </div>
      <!-- Modal Advanced Settings -->
      <div id="modal-advanced" class="modal-overlay">
        <div class="modal">
          <h2 data-i18n="header.advanced_settings">Advanced Settings</h2>
          <label for="input-learning-rate" data-i18n="label.learning_rate">
            Learning Rate:</label
          >
          <input
            type="number"
            id="input-learning-rate"
            step="0.01"
            value="0.01"
          />
          <label for="input-max-iteration" data-i18n="label.max_iteration">
            Max. Iteration:</label
          >
          <input type="number" id="input-max-iteration" value="100" />

          <label for="input-penalty-factor" data-i18n="label.penalty_factor">
            Penalty Increase Factor:</label
          >
          <input type="number" id="input-penalty-factor" step="0.1" value="2" />
          <div class="form-inline">
            <input type="checkbox" id="input-enable-input-relation">
            <label for="input-enable-input-relation" data-i18n="label.enable_input_relation">Enable relation input</label>
          </div>
          <div class="modal-actions">
            <button
              id="btn-advanced-close"
              class="btn-control"
              data-i18n="btn.close"
            >
              Close
            </button>
          </div>
        </div>
      </div>
      <!-- Modal relation -->
      <div id="modal-relation" class="modal-overlay">
        <div class="modal">
          <h2 data-i18n="header.polygon_relation_editor">Polygon Relation Editor</h2>
          <div class="relation-body">
            <div id="log-messages" class="relation-log"></div>
            <div class="relation-controls">
              <label for="slct-main-poly" data-i18n="label.main_polygon">Main Polygon:</label>
              <select id="slct-main-poly"></select>
              <div class="modal-actions">
                <button class="btn-control" id="btn-relation-slct-all" data-i18n="btn.select_all">Select All</button>
                <button class="btn-control" id="btn-relation-rvrs-slct" data-i18n="btn.reverse_selection">Reverse Selection</button>
              </div>
              <div class="poly-list" id="relation-poly-list"></div>
              <div class="long-actions">
                <button class="btn-control" id="btn-mutual-not-overlap" data-i18n="btn.mutual_not_overlap">Make selected polygons not overlap with each other</button>
                <button class="btn-control" id="btn-mutual-overlap" data-i18n="btn.mutual_overlap">Make selected polygons overlap with each other</button>
                <button class="btn-control" id="btn-main-not-overlap" data-i18n="btn.main_not_overlap">Make selected polygons not overlap with Main Polygon</button>
                <button class="btn-control" id="btn-main-overlap" data-i18n="btn.main_overlap">Make selected polygons overlap with Main Polygon</button>
                <button class="btn-control" id="btn-fixed" data-i18n="btn.fix">Make selected polygons fixed</button>
                <button class="btn-control" id="btn-clear-relation" data-i18n="btn.clear">Clear all relations</button>
              </div>
            </div>
          </div>
          <div class="modal-actions">
            <button
              id="btn-relation-close"
              class="btn-control"
              data-i18n="btn.close"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
